<template>
	<view>
		<!-- 背景图 -->
		<image src="/static/demo/datapic/14.jpg" mode="aspectFill" style="height: 320rpx;" class="w-100"></image>
		<!-- 头像信息 -->
		<view style="height: 350rpx;" class="px-3 border-bottom">
			<!-- 头像|关注 -->
			<view class="flex align-end">
				<view style="min-width: 130rpx;min-height: 130rpx;margin-top: -65rpx;" class="rounded-circle">
					<image :src="user.avatar?user.avatar:'/static/demo/userpic/12.jpg'" style="width: 130rpx;height: 130rpx;" class="rounded-circle"></image>
				</view>
				<view v-if="user_id!==my_user_id" class="ml-auto">
					<main-button>{{follow?'已关注':'关注'}}</main-button>
				</view>
			</view>
			<!-- 性别，昵称，uid -->
			<view class="flex align-center">
				<text class="font-lg text-main font-weight-bold">{{user.nickname||user.username}}</text>
				<text class="ml-2 text-light-muted font">UID:{{user.id}}</text>
			</view>
			<!-- 标签 -->
			<!-- <view class="flex align-center py-1">
				<view class="bg-main text-white rounded px-1 font-sm">年度大会员</view>
			</view> -->
			<!-- 粉丝关注 -->
			<view class="flex align-center">
				<view class="flex align-center text-dark font-md">
					{{followCount}}<text class="text-muted font-sm ml-2">关注</text>
				</view>
				<view class="flex align-center text-dark font-md ml-3">
					{{fensCount}}<text class="text-muted font-sm ml-2">粉丝</text>
				</view>
			</view>
			<!-- 描述 -->
			<view class="text-light-muted font text-ellipsis" style="line-height: 1.5;">
				{{user.desc?user.desc:'暂无描述...'}}
			</view>
		</view>
		<!-- 选项卡 -->
		<view class="flex align-center" style="height: 80rpx;">
			<view class="flex-1 flex justify-center font-md" v-for="(item,index) in tabBars" :key="index" @click="taptab(index)">
				<text :class="tabIndex === index ? 'text-main font-weight-bold' : 'text-muted'">{{item.name}}</text>
			</view>
		</view>
		<!-- 滑动列表 -->
		<swiper :current="tabIndex" :duration="300" :style="scrollStyle" @change="changeTab">
			<swiper-item v-for="(tab,tabI) in tabBars" :key="tabI">
				<scroll-view @scrolltolower="loadMore" scroll-y="true" :style="scrollStyle">
					<view class="f-divider"></view>
					<media-list type="one" v-for="(item,index) in tab.data" :key="index" :item="item" :index="index"></media-list>
					<!-- 默认样式 -->
					<view v-if="tabBars[tabIndex].data.length===0" class="flex w-100 align-center justify-center text-secondary" style="height: 100rpx;">
						暂无数据
					</view>
					<view v-if="tabBars[tabIndex].data.length>=10" class="flex align-center justify-center py-3 bg-light">
						<text class="text-muted font">{{tabBars[tabIndex].loadtext}}</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import mainButton from '@/components/common/main-button.vue';
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue';
	import mediaList from '@/components/common/media-list.vue';
	import {mapState} from 'vuex'

	export default {
		components: {
			mainButton,
			uniBadge,
			mediaList
		},
		data() {
			return {
				user_id: 0,
				scrollH: 0,
				tabIndex: 0,
				followCount: 0,
				fensCount: 0,
				user: {
					"id": 0,
					"username": "",
					"nickname": "",
					"email": "",
					"avatar": "",
					"phone": "",
					"sex": "",
					"desc": "",
				},
				follow: false,
				tabBars: [{
					name: "作品",
					key: 'video',
					page: 1,
					loadtext: '上拉加载更多',
					data:[]
				}, {
					name: "收藏",
					key: 'fava',
					page: 1,
					loadtext: '上拉加载更多',
					data:[]
				}]
				
			}
		},
		onLoad(e) {
			if (!e.user_id) {
				return uni.navigateBack({
					delta: 1
				})
			}
			this.user_id = e.user_id
			let res = uni.getSystemInfoSync()
			this.scrollH = res.windowHeight - uni.upx2px(80) - 44 - res.statusBarHeight
			this.getUserInfo()
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 300)
		},
		computed: {
			...mapState({
				my_user_id:state=>{
					return state.user?state.user.id:0
				}
			}),
			scrollStyle() {
				return `height:${this.scrollH}px;`
			},
			url(){
				let tab=this.tabBars[this.tabIndex]
				return `/${tab.key}_list/${tab.page}?user_id=${this.user_id}`
			},
		},
		onPullDownRefresh() {
			let index=this.tabIndex
			this.tabBars[index].page=1
			this.getData().then(res=>{
				uni.showToast({
					title:'刷新成功',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			}).catch(err=>{
				uni.showToast({
					title:'刷新失败',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			loadMore(){
				let index=this.tabIndex
				this.tabBars[index].page+=1
				if(this.tabBars[index].loadtext!=='上拉加载更多'){
					return
				}
				this.getData().catch(err=>{
					this.tabBars[index].page-=1
					this.tabBars[index].loadtext="上拉加载更多"
				})
			},
			getData(){
				let index=this.tabIndex
				let page=this.tabBars[index].page
				this.tabBars[index].loadtext='加载中...'
				let data=this.tabBars[index].data
				return this.$H.get(this.url).then(res=>{
					this.tabBars[index].data=page===1?res:[...data,...res],
					this.tabBars[index].loadtext=page*10===data.length?'上拉加载更多':'没有更多啦'
				})
			},
			getUserInfo() {
				this.$H.get('/user/user_info?user_id=' + this.user_id, {
					token: true,
					noJump: true,
					toast: false,
				}).then(res => {
					this.user=res.user
					this.fensCount=res.fensCount
					this.followCount=res.followCount
					this.follow=res.follow
				})
			},
			taptab(index) {
				this.tabIndex = index
			},
			changeTab(e) {
				this.tabIndex = e.detail.current
				let index=this.tabIndex
				this.tabBars[index].page=1
				this.getData()
			}
		}
	}
</script>

<style>

</style>
